<template>
	<app-layout>
		<view class=" tn-safe-area-inset-bottom">
			<!-- 顶部自定义导航 -->
			<tn-nav-bar>通讯录

			</tn-nav-bar>
			<!-- 顶部自定义导航 -->
			<view class="tabs-fixed tn-bg-white">
				<view class="tn-flex tn-flex-col-between tn-flex-col-center tn-padding-top-sm"
					:style="{marginTop: vuex_custom_bar_height + 'px'}">
					<view class="justify-content-item" style="width: 87vw;overflow: hidden;">
						<tn-tabs class="tabs" :list="tablist" :countshow="!!0" :isScroll="false" :current="current"
							name="details" style="width: 87vw;" @change="tabsChange"></tn-tabs>
					</view>

					<view class="justify-content-item" style="width: 13vw;overflow: hidden;" @click="search=true">
						<view class="tn-color-black tn-round"
							style="font-size: 45rpx;margin-top: -5rpx;margin-left: 15rpx;">
							<text class="tn-icon-search tn-padding-xs"></text>
						</view>

					</view>
				</view>
			</view>
			<view class="message">
				<view v-if="!search" :style="{paddingTop: vuex_custom_bar_height + 'px'}"></view>
				<tn-popup v-model="search" mode="top" :zIndex="9999" :closeBtn="!!1">
					<view class="tn-search">
						<!-- 筛选-->
						<view class="tn-padding">
							<tn-form :model="form" ref="uForm">
								<!-- 并且可以用单位和类别分别筛选，及姓名，手机搜索 显示用gsxz表里的顺序及users表里的sort进行排序 -->
								<tn-form-item label="姓名" prop="username">
									<tn-input v-model="form.username" clearable />
								</tn-form-item>
								<tn-form-item label="手机" prop="iphone">
									<tn-input v-model="form.iphone" clearable />
								</tn-form-item>
								<tn-form-item label="单位" prop="gsxz">
									<tn-input v-model="form.gsxz" type="select" :selectOpen="groupShow" clearable
										placeholder='选择单位' @click="groupShow = true" />
								</tn-form-item>
								<tn-form-item label="类别" prop="groupname">
									<tn-input v-model="form.groupname" type="select" :selectOpen="typeShow" clearable
										placeholder='选择类别' @click="typeShow = true" />
								</tn-form-item>
								<view class="tn-margin-top-sm tn-flex tn-flex-row-right">
									<view class="tn-margin-left-sm">
										<tn-button backgroundColor="#afafaf" fontColor="#FFFFFF" width="100%"
											@click="init">重置</tn-button>
									</view>
									<view class="tn-margin-left-sm">
										<tn-button backgroundColor="#2074d4" fontColor="#FFFFFF" width="100%"
											@click="sea">查询</tn-button>
									</view>
								</view>
							</tn-form>
						</view>
					</view>
				</tn-popup>
				<!-- 方式1 end-->
				<tn-select labelName="gsxz" valueName="gsxz" v-model="groupShow" :list="grouplist"
					@confirm="groupconfirm"></tn-select>
				<tn-select labelName="groupname" valueName="abbreviation" v-model="typeShow" :list="typelist"
					@confirm="typeconfirm"></tn-select>
					
				<view class="book" v-for="(item,index) in list" :key="index" @click="tn('/messagePages/chat')">
					<view>
						<image v-if="item.avatar" class="avatar" :src="item.avatar" mode="aspectFit">
						</image>
						<view v-else class="avatar">{{item.zhanghaouser.substr(-2)}}</view>
					</view>
					<!-- 查询users表里的电话TEL  手机iphone   邮箱email  QQ qq  类别 group 单位group进行显示，并且可以用单位和类别分别筛选，及姓名，手机搜索 显示用gsxz表里的顺序及users表里的sort进行排序 -->
					<view class="tn-padding-left-sm books">
						<view class="">
							<text class="tn-text-bold"> {{item.zhanghaouser}}</text>
						</view>
					<!-- 	<view class="">
							类别：<text class=""></text>
						</view> -->
						<view class="">
							<text class="">{{item.guishu}}{{item.groupname}}</text>
						</view>
						
						<view class="">
							电话：<text class="">{{item.tel}}</text>
						</view>
						<view class="">
							手机：<text class="">{{item.iphone}}</text>
						</view>
						<view class="">
							邮箱：<text class="">{{item.email}}</text>
						</view>

						<view class="" v-if="item.group">
							单位：<text class="">{{item.groupname}}</text>
						</view>
					</view>
				</view>
			</view>
				<tn-empty v-if="list.length<1" class="error" icon="/static/error/common.png" mode="data"></tn-empty>
			<view class="tn-tabbar-height"></view>
		</view>
	</app-layout>
</template>

<script>
	export default {
		name: 'books',
		data() {
			return {
				form: {
					username: '',
					iphone: '',
					gsxz: '',
					usergroup: '',
					groupname:''
				},
				search: !!0,
				page: 1,
				list: [],
				tablist: [{
					id: 0,
					details: '全部'
				}],
				current: 0,

				groupShow: false,
				grouplist: [],

				typeShow: false,
				typelist: [],
			}
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		onReachBottom() {
			this.getlist();
		},
		onLoad() {
			this.getlist()
			this.getgrouplist()
			this.gettypelist()
		},
		methods: {
			groupconfirm(e) {
				this.form.gsxz = e[0].label
			},

			typeconfirm(e) {
				 this.form.usergroup =e[0].value
				 this.form.groupname =e[0].label
			},
			init() {
				this.form = {
					username: '',
					iphone: '',
					gsxz: '',
					usergroup: '',
					groupname:''
				}
				this.sea()
			},
			sea(){
				this.page=1;
				this.getlist()
			},
			getlist() {
				let t = this;
				t.search = false
				this.$t.message.loading('加载中');
				this.$request({
					url: this.$api.common.bookslist,
					data: {
						limit_page: t.page,limit_count:20,
						...t.form,
						
					},
					method: 'POST'
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						this.grouplist = response.gsxz;
						this.typelist = response.ug;
					if (this.page !== 1) {
						this.list = this.list.concat(response.list);
					} else {
						this.list = response.list;
					}
					this.page = response.list.length ? this.page + 1 : this.page;
					}
				});
			},
			getgrouplist() {
				let t = this;
				this.$request({
					url: this.$api.common.typelist,
					data: {
						did: 25
					},
					method: 'POST'
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						this.typelist = response.list;
					}
					this.$t.message.closeLoading();
				}).catch(err => {
					t.$t.message.toast(err)
				});
			},

			//获取类
			gettypelist() {
				let t = this;
				this.$request({
					url: this.$api.common.typelist,
					data: {
						did: 25
					},
					method: 'POST'
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						this.typelist = response.list;
					}
					this.$t.message.closeLoading();
				}).catch(err => {
					t.$t.message.toast(err)
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.message {
		padding: 20rpx ;
		padding-top:120rpx
	}

	.book {
		display: flex;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF !important;
		padding: 4vw;
	}

	.tn-search {
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
		transition: all 0.25s ease-out;
		z-index: 100;
	}

	.books {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			flex-basis: 5%;
			width: 200rpx;
			position: absolute;
		}
	}

	/* 自定义导航栏内容 end */

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}





	.tn-color-cat {
		color: #1D2541;
	}

	/* 页面阴影 start*/
	.tn-cat-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}


	/* 标签*/
	.tag {
		margin: 10rpx 0 10rpx 10rpx;
		color: #7C8191;
		background-color: #F3F2F7;
		padding: 4rpx 14rpx 6rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
	}


	/* 用户头像 start */
	.logo-image {
		width: 130rpx;
		height: 150rpx;
		border-radius: 5%;
		border: 1rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);

	}
</style>